import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Text} from '@tarojs/components'
import {AtIcon} from 'taro-ui'
import {platform} from "../../utils/platform-settting.service";
import '../location.scss'

type PageStateProps = {
  onShow: any
}
type PageOwnProps = {
  bgColor?: string
  style?: string
  platformSet?: any
  onShow?: any
  customClass?: any
  placeholderText?: any
  separationLine?: any
  cityColor?: any
  cityFont?: any
  searchColor?: any
  searchFont?: any
}
type PageState = {}
type IProps = PageStateProps & PageOwnProps

interface CityLocation {
  props: IProps
}

class CityLocation extends Component {
  static defaultProps = {
    bgColor: "white",
    style: '',
    onShow: () => {
      return false
    },
    separationLine: true,
    platformSet: {},
    cityColor: '#666',
    cityFont: '12px',
    searchColor: '#666',
    searchFont: '12px',
    customClass: '',
    placeholderText: '搜索关键词'
  }

  render() {
    const {onShow, platformSet, bgColor, style, customClass, placeholderText, separationLine, cityColor, cityFont, searchColor, searchFont} = this.props;
    return (<View className={`${customClass || ''}`}>
        <View
          style={`background-color:${bgColor};${style};z-index:99`}
          onClick={(e) => e.stopPropagation()}
          className='cityLocationRoot'
        >
          <View className='city' onClick={() => onShow()} style={`color: ${cityColor};font-size: ${cityFont}`}>
            <View>{platformSet.platformName || platform.info.platformName}</View>
            <View className='m-l-ten'><AtIcon value='chevron-down' customStyle='font-size: 12px' size='12' /></View>
          </View>
          <View className='search' onClick={() => {
            Taro.navigateTo({url: '/common/search/search'})
          }} style={`color: ${searchColor};font-size: ${searchFont}`}
          >
            {separationLine && <View className='m-l-ten'>
              <Text className='icon__h' />
            </View>}
            <View className='m-l-ten'>
              <AtIcon value='search' customStyle='font-size: 16px' size='16' />
            </View>
            <View className='m-l-ten'>{placeholderText}</View>
          </View>
        </View>
      </View>
    )
  }
}

export default CityLocation as ComponentClass<PageOwnProps, PageState>
